﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Location.aspx.cs" Inherits="WebRole1.Config.Location" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
   <link rel="stylesheet" href="/Scripts/JqueryTreeview/jquery.treeview.css" />

   <script type="text/javascript" src="/Scripts/ui/ui.draggable.js"></script>

   <script type="text/javascript" src="/Scripts/ui/ui.resizable.js"></script>

   <script type="text/javascript" src="/Scripts/ui/ui.dialog.js"></script>

   <script type="text/javascript" src="/Scripts/external/bgiframe/jquery.bgiframe.js"></script>

   <script src="/Scripts/JqueryTreeview/jquery.treeview.js" type="text/javascript"></script>
	<script src="/Scripts/JqueryTreeview/jquery.treeview.asyncWay.js" type="text/javascript"></script>

   <script src="/Scripts/vanadium/vanadium.js" type="text/javascript"></script>
   <script src="/Scripts/utils.js" type="text/javascript"></script>
   
   
   <script type="text/javascript">
      $.ui.dialog.defaults.bgiframe = true;
      $(function() {
         $("#PublishDivId").dialog({
            autoOpen: false,
            width: 650
         });

         $("#ChooseCityDivId").dialog({
            autoOpen: false
         });

         $("#DivBusy").dialog({
            autoOpen: false,
            modal: true
         });
         
      });

      $(document).ready(function() {
         $("#chooseCategory").treeview({
            url: "../ajaxway.svc/GetChildCategoryNoCity",
            persist: "location",
            collapsed: true,
            unique: true,
            useCheckbox: true,
            checkFunction: "LCat",
            checkClass: "CC",
            animated: false,
            unique: false
         });

         $("#chooseCity").treeview({
            url: "../ajaxway.svc/GetCity",
            type: "city",
            persist: "location",
            collapsed: true,
            unique: true,
            useLink: true,
            linkFunction: "ChooseCity",
            animated: false,  //will ensure we don't toggle all the leaves at the same time
            unique: false     //will ensure we don't toggle all the leaves at the same time
         });
      });
      
      function CheckAndDecorate() {
         var validation_result = Vanadium.validate();

         var success = true;
         validation_result.each(function(_element, validation_results) {
            for (var r in validation_results) {
               if (validation_results[r].success == false) {
                  success = false;
                  break;
               }
            }
            if (success == false) {
               return false; // break from hashmap iteration
            }
         });
         if (!success) {
            Vanadium.decorate(validation_result);
            return false;
         }
         return success;
      };


      function CheckAndDecorate() {
         var validation_result = Vanadium.validate();

         var success = true;
         validation_result.each(function(_element, validation_results) {
            for (var r in validation_results) {
               if (validation_results[r].success == false) {
                  success = false;
                  break;
               }
            }
            if (success == false) {
               return false; // break from hashmap iteration
            }
         });
         if (!success) {
            Vanadium.decorate(validation_result);
            return false;
         }
         return success;
      };

      function PublishSubmit() {
         if ($('#CurrentLiveUser').html() == "") {
            alert("You need to login to windows live account to submit.");
            return;
         }
         
         if (!CheckAndDecorate()) {
            return;
         }

         var count = NumOfCategories();
         if (count == 0) {
            alert("Please choose at least one category.");
            return;
         }

         if (count > 3) {
            alert("Please choose at most three categories.");
            return;
         }

         $('.inputLocationId').attr("value", $("#inputLocationId").attr("value"));
         $('.inputLatitude').attr("value", $("#InputLatitude").attr("value"));
         $('.inputLongtitude').attr("value", $("#InputLongtitude").attr("value"));
         $('.inputLocationName').attr("value", $("#InputLocationName").attr("value"));
         $('.inputLocationdesc').attr("value", $("#inputLocationdesc").attr("value"));
         $('.inputLocationUrl').attr("value", $("#inputLocationUrl").attr("value"));
         $('.inputAddress1').attr("value", $("#inputAddress1").attr("value"));
         $('.inputAddress2').attr("value", $("#inputAddress2").attr("value"));

         $('.inputSearchCity').attr("value", $("#inputSearchCity").attr("value"));
         
         $('.inputPhone').attr("value", $("#inputPhone").attr("value"));
         $('.inputUrlLink1Mark').attr("value", $("#inputUrlLink1Mark").attr("value"));
         $('.inputUrlLink1').attr("value", $("#inputUrlLink1").attr("value"));
         $('.inputUrlLink2Mark').attr("value", $("#inputUrlLink2Mark").attr("value"));
         $('.inputUrlLink2').attr("value", $("#inputUrlLink2").attr("value"));
         $('.inputImageUrl').attr("value", $("#inputImageUrl").attr("value"));

         //$('.inputListRating').attr("value", $("#inputListRating").attr("value"));
         $('.inputCategory').attr("value", $("#inputCategory").attr("value"));

         //asp.net checkbox with css class use a span to wrap it...
         if ($('.inputEmailNotify').html().indexOf("<INPUT") >= 0) {
            $('.inputEmailNotify input').attr("checked", $("#inputEmailNotify").attr("checked"));
         }
         else {
            $('.inputEmailNotify').attr("checked", $("#inputEmailNotify").attr("checked"));
         }

         $('.inputButtonPublish').click();

         $('#PublishDivId').dialog('close');
      }

      function PublishDelete() {
         if (confirm("Are you really sure to delete this location? The related comments will all be deleted. There is no way to retrieve it back.") == true) {
            $('.inputLocationId').attr("value", $("#inputLocationId").attr("value"));
            $('.inputButtonDelete').click();
            $('#PublishDivId').dialog('close');
         }
      }

      function PickCity() {
         $('#ChooseCityDivId').dialog('open');
      }

      function ChooseCity(id, name, latitude, longtitude) {
         $('#inputSearchCity').attr('value', name);
         $('#ChooseCityDivId').dialog('close');
      }

      var dataService = null;

      function setupDataService() {
         if (dataService == null) {
            dataService = new Sys.Data.AdoNetServiceProxy("../LocationDB.svc");
            dataService.set_timeout(60000);
         }
      }

      function ModifyLoc(id) {
         setupDataService();
         dataService.set_defaultFailedCallback(onFailure);
         dataService.set_defaultSucceededCallback(onSetupModifyLocation);
         dataService.query("Location(" + id.toString() + ")");
      }

      function onFailure(result, userContext, operation) {
         alert(result.get_message() + "\r\tStatus Code:  " + result.get_statusCode() + "\r\tTimed Out:  " + result.get_timedOut());
      }
      
      function onSetupModifyLocation(result, userContext, operation) {
         var loc = result;

         $(".inputLocationId").attr("value", loc.CategoryID);
         
         $("#inputLocationId").attr("value", loc.LocationID);
         $("#InputLatitude").attr("value", loc.Lat);
         $("#InputLongtitude").attr("value", loc.Lon);
         $("#InputLocationName").attr("value", loc.Name);
         $("#inputLocationdesc").attr("value", loc.Descr);

         $("#inputLocationUrl").attr("value", loc.Url);
         $("#inputAddress1").attr("value", loc.Address1);
         $("#inputAddress2").attr("value", loc.Address2);
         $("#inputPhone").attr("value", loc.Phone);
         $("#inputUrlLink1Mark").attr("value", loc.UrlLink1Mark);
         $("#inputUrlLink1").attr("value", loc.UrlLink1);
         $("#inputUrlLink2Mark").attr("value", loc.UrlLink2Mark);
         $("#inputUrlLink2").attr("value", loc.UrlLink2);
         $("#inputImageUrl").attr("value", loc.ImageUrl);
         
         if (loc.NeedEmailUpdate) {
            $("#inputEmailNotify").attr("checked", "checked");
         }
         else {
            $("#inputEmailNotify").attr("checked", "");
         }
         InitCategory();

         dataService.set_defaultSucceededCallback(onSuccessGetLocationCity);
         dataService.query("Location(" + loc.LocationID.toString() + ")/City");
         
         $('#PublishDivId').dialog('option', 'title', "Modify this location");
         $("#InputButtonPublish").attr("value", "Modify this location");
         $("#publishNote").html("Note: Only user published this location can modify it.");
         $('#PublishDivId').dialog('open');
      }

      function onSuccessGetLocationCity(result, userContext, operation) {
         var city = result;
         $("#inputSearchCity").attr("value", city.SearchName);
      }
      
      function InitCategory() {
         //copy the category from navigation 2nd children
         $('.CC').attr("checked", "");
         $('#inputCategory').attr("value", "");
      }

   </script>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="LeftContent" runat="server">
</asp:Content>


   
   
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

   <!-- always udpate when there is update panel action, such as modify or delete -->
   <asp:UpdatePanel ID="UpdatePanel3" runat="server">
      <ContentTemplate>
 
         <asp:PlaceHolder ID="PlaceHolderLocations" runat="server"></asp:PlaceHolder>
 
      </ContentTemplate>
   </asp:UpdatePanel>
   <p>
   </p>

   <div class="hide">
      <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
         <ContentTemplate>
            Should Hide Id: &nbsp;<asp:TextBox ID="TextBoxLocationID" runat="server" CssClass="inputLocationId"></asp:TextBox>
            <br />
            Latitude: &nbsp;<asp:TextBox ID="TextBoxLatitude" runat="server" CssClass="inputLatitude"></asp:TextBox>
            <br />
            Longtitude: &nbsp;<asp:TextBox ID="TextBoxLongtitude" runat="server" CssClass="inputLongtitude"></asp:TextBox>
            <br />
            Location Name: &nbsp;<asp:TextBox ID="TextBoxLocationName" runat="server" CssClass="inputLocationName"></asp:TextBox>
            <br />
            Description:
            <asp:TextBox ID="TextBoxLocationdesc" runat="server" CssClass="inputLocationdesc"></asp:TextBox>
            <br />
            URL:
            <asp:TextBox ID="TextLocationUrl" runat="server" CssClass="inputLocationUrl"></asp:TextBox>
            <br />
            Address Line 1:
            <asp:TextBox ID="TextBoxAddress1" runat="server" CssClass="inputAddress1"></asp:TextBox>
            <br />
            Address Line 2:
            <asp:TextBox ID="TextBoxAddress2" runat="server" CssClass="inputAddress2"></asp:TextBox>
            <br />
            <asp:CheckBox ID="CheckBoxEmailNotify" runat="server" CssClass="inputEmailNotify" />
            Email me when there is comment
            <br />
            
            <asp:TextBox ID="TextBoxPhone" runat="server" CssClass="inputPhone"></asp:TextBox>
            <asp:TextBox ID="TextBoxUrlLink1Mark" runat="server" CssClass="inputUrlLink1Mark"></asp:TextBox>
            <asp:TextBox ID="TextBoxUrlLink1" runat="server" CssClass="inputUrlLink1"></asp:TextBox>
            <asp:TextBox ID="TextBoxUrlLink2Mark" runat="server" CssClass="inputUrlLink2Mark"></asp:TextBox>
            <asp:TextBox ID="TextBoxUrlLink2" runat="server" CssClass="inputUrlLink2"></asp:TextBox>
            <asp:TextBox ID="TextBoxImageUrl" runat="server" CssClass="inputImageUrl"></asp:TextBox>
            
            Categories:
            <asp:TextBox ID="TextBoxCategory" runat="server" CssClass="inputCategory"></asp:TextBox>
            <br />
            <asp:Button ID="ButtonPublish" runat="server" Text="Publish this location" CssClass="inputButtonPublish"
               OnClick="ButtonPublish_Click" UseSubmitBehavior="false" />
            <asp:Button ID="ButtonDelete" runat="server" Text="Delete this category" CssClass="inputButtonDelete"
               UseSubmitBehavior="false" onclick="ButtonDelete_Click" />

            <asp:TextBox ID="TextBoxSearchCity" runat="server" CssClass="inputSearchCity"></asp:TextBox>
            <br />
               
         </ContentTemplate>
      </asp:UpdatePanel>
   </div>
   <div id="PublishDivId" title="Publish this Location">
      <table>
         <tr>
            <td style="width: 120px; min-width: 120px;" valign="top">
               <table>
                  <tr>
                     <td style="width: 120px; min-width: 120px;">
                        Latitude:
                     </td>
                     <td style="width: 150px; min-width: 150px;">
                        <input id="InputLatitude" class=":float :required" type="text" />*
                     </td>
                  </tr>
                  <tr>
                     <td>
                        Longtitude:&nbsp;
                     </td>
                     <td>
                        <input id="InputLongtitude" class=":float :required" type="text" />*
                     </td>
                  </tr>
                  <tr>
                     <td>
                        Location Name:&nbsp;
                     </td>
                     <td>
                        <input id="InputLocationName" class=":required" type="text" />*
                     </td>
                  </tr>
                  <tr>
                     <td>
                        Description:&nbsp;
                     </td>
                     <td>
                        <input id="inputLocationdesc" type="text" />
                     </td>
                  </tr>
                  <tr>
                     <td>
                        URL:&nbsp;
                     </td>
                     <td>
                        <input id="inputLocationUrl" class=":url" type="text" />
                     </td>
                  </tr>
                  <tr>
                     <td>
                        Address Line 1:&nbsp;
                     </td>
                     <td>
                        <input id="inputAddress1" type="text" />
                     </td>
                  </tr>
                  <tr>
                     <td>
                        Address Line 2:&nbsp;
                     </td>
                     <td>
                        <input id="inputAddress2" type="text" />
                     </td>
                  </tr>
                  <tr>
                     <td>
                        <a href="#" onclick="PickCity();">Choose a city</a>
                     </td>
                     <td>
                        <input id="inputSearchCity" type="text" value="" class=":required" readonly="readonly" />*
                     </td>
                  </tr>
                  <tr>
                     <td>
                        Phone:&nbsp;
                     </td>
                     <td>
                        <input id="inputPhone" type="text" />
                     </td>
                  </tr>
                  <tr>
                     <td>
                        1st Url Link display:&nbsp;
                     </td>
                     <td>
                        <input id="inputUrlLink1Mark" type="text" />
                     </td>
                  </tr>
                  <tr>
                     <td>
                        1st Url Link:&nbsp;
                     </td>
                     <td>
                        <input id="inputUrlLink1" type="text" />
                     </td>
                  </tr>
                  <tr>
                     <td>
                        2nd Url Link display:&nbsp;
                     </td>
                     <td>
                        <input id="inputUrlLink2Mark" type="text" />
                     </td>
                  </tr>
                  <tr>
                     <td>
                        2nd Url Link:&nbsp;
                     </td>
                     <td>
                        <input id="inputUrlLink2" type="text" />
                     </td>
                  </tr>
                  <tr>
                     <td>
                        Display image URL:&nbsp;
                     </td>
                     <td>
                        <input id="inputImageUrl" type="text" />
                     </td>
                  </tr>
                  <tr>
                     <td colspan="2">
                        <input id="inputEmailNotify" type="checkbox"  class="hide" />
                        <!-- todo: we haven't done this yet, probably not necessary either
                        Email me when there is comment.
                        -->
                     </td>
                  </tr>
                  <tr>
                     <td colspan="2">
                        &nbsp;<br />
                        <input id="inputLocationId" type="text" class="hide" />
                        <input id="inputCategory" type="text" class="hide" />
                        <input id="InputButtonPublish" type="button" value="Publish this location" onclick="PublishSubmit();" />
                        <input id="InputButtonDelete" type="button" value="Delete this location" onclick="PublishDelete();" />
                        <br /><span id="publishNote"></span>
                     </td>
                  </tr>
               </table>
            </td>
            <td rowspan="9" style="width: 380" align="left" valign="top">
               <div class="chooseCategoryDiv">
               Choose 1 to 3 categories
               <ul id="chooseCategory">
               </ul>
               </div>
            </td>
         </tr>
      </table>
   </div>
   

   <div id="ChooseCityDivId" title="Choose search city">
      <div class="chooseCityDiv">

<%--      <a href="#" onclick="ClearCity();">General category, no city</a>
      <br />--%>
      <span>Search City Name
      <input id="TextSearchCity" type="text" onkeyup="OnSearchCity(this.value,  0);" />
      </span>
      <div id="searchCityContent" class="citySearchDiv"></div>
      
      <ul id="chooseCity">
         <li class='hasChildren top' >Choose City
	         <ul>
		         <li><span class="placeholder"><img alt="loading" src='/images/ajax-loader.gif' />&nbsp;</span></li>
	         </ul>
         </li>
      </ul>
      
      </div>
   </div>
   
   <div id="DivBusy" title="Connecting">
      Please Wait. <img alt="loading" src='/images/ajax-loader.gif' />
   </div>

   
</asp:Content>
